<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
        <el-row>
            <el-button type="primary" :icon="CirclePlusFilled">添加角色</el-button>
        </el-row>
        <el-row>
            <el-table stripe class="table" :data="tableData.authorList">
                <el-table-column type="expand">
                    <template #default="scope"> <!--  :class="['padding-l100 bottom', i === 0 ? 'top' : ''] -->
                        <el-row v-for="(m, i) in scope.row.menus" :key="m.id"
                            :class="['padding-l bottom', i === 0 ? 'top' : '']">
                            <el-col :span="2"><el-tag class="margin" type="success" closable
                                    @click="removeMenu(scope.row, m.id)">{{ m.name }}</el-tag></el-col>
                            <el-col :span="1"><el-icon class="margin-t">
                                    <ArrowRight />
                                </el-icon></el-col>
                            <el-col :span="21"><el-tag class="margin" v-for="c in m.children" :key="c.id" type="info"
                                    closable @click="removeMenu(scope.row, c.id)">{{ c.name }}</el-tag></el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="desc" label="备注" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- <el-button>编辑</el-button> -->
                        <el-button type="primary" @click="showMenu(scope.row)">分配权限</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-card>

    <el-dialog v-model="showmenu" title="分配权限" width="40%" :before-close="handleClose">
        <el-tree default-expand-all ref="treeref" node-key="id"  show-checkbox :data="menuList" :props="menuProps" @node-click="handleNodeClick" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showmenu = false">取消</el-button>
                <el-button type="primary" @click="sumbMenu">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ArrowRight, CirclePlusFilled } from '@element-plus/icons-vue'
import api from '@/api/index.js'
import { reactive, onMounted,ref,nextTick } from 'vue';


let showmenu=ref(false)
let menuList=ref([])
let keyList=ref([])
const treeref=ref(null)
let rid=ref(null)
const tableData = reactive({
    authorList: []
})
const menuProps={
    children:'children',
    label:'name',
}
onMounted(() => {
    get_roles()
    getMenuList()
})
// 获取角色列表
const get_roles = () => {
    api.get_roles().then(res => {
        tableData.authorList = res.data.data
    })
}

// 删除权限标签
const removeMenu = (row, mid) => {
    ElMessageBox.confirm(
        '确定删除该角色权限？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            api.del_role_menu(row.id, mid).then(res => {
                // console.log(res)
                get_roles()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })

        })
}

const showMenu =(row)=>{

    showmenu.value=true

    // 初始化keyList
    keyList=[]
    // 获取一级菜单
    row.menus.forEach(item=>{
        // 获取二级菜单
        item.children.forEach(citem=>{
            // 记录选择的id
            keyList.push(citem.id)
        })
    });
    console.log(keyList)
    // 给树结构设置默认选中
    nextTick(()=>{

        // 当前dom渲染完后执行
        treeref.value.setCheckedKeys(keyList)
    })
    rid.value=row.id
}

const getMenuList=()=>{
    api.get_menu().then(res=>{
        menuList=res.data.data
    })
}

const sumbMenu=()=>{
    // 获取菜单ID
    let mids=[
        treeref.value.getCheckedKeys(),
        treeref.value.getHalfCheckedKeys()
    ]
    mids=mids.join(',')
    console.log(mids)
    // 获取角色ID
    console.log(rid.value)
    // 提交数据请求
    api.set_menu(rid.value,{'mids':mids}).then(res=>{
        console.log(res.data)
        showmenu.value=false
        get_roles()
    })
}
</script>

<style scoped>
.box-card {
    margin-top: 25px;
}

.padding-l {
    padding-left: 100px;
}

.top {
    border-top: 1px solid #eee;
}

.botton {
    border-bottom: 1px solid #eee;
}

.margin {
    margin: 10px;
}

.margin-t {
    margin-top: 15px;
}
</style>